﻿<%@ Page Title="好友分组" Language="C#" MasterPageFile="~/member/mMenber.master" AutoEventWireup="true" CodeBehind="FriendGroups.aspx.cs" Inherits="map.member.FriendGroups" %>

<%@ Register Assembly="RuleCode.Common" Namespace="RuleCode.Controls" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head2" runat="server">
      <link href="../outstyle.css" rel="stylesheet" type="text/css" />
      <link href="../Stylesheet1.css" rel="stylesheet" type="text/css" />
      
      <style type="text/css">
          .friendCateDiv
          {
              width:100%;
              height:400px;
              border:solid 1px #ECECEC; 
                          
          }
          .friendListDiv
          {
              width:100%;                            
              height:400px;
              border:solid 1px #ECECEC; 
              border-left:none;  
              vertical-align:top;             
          }
          .friendCateTd
          {
              width:200px;
              border:solid 1px #ECECEC; 
              vertical-align:top;
          }
          .friendListTd
          {   
             border:solid 1px #ECECEC; 
             border-left:none;   
          }
          .mainContentDiv
          {
              width:820px;
              margin-top:10px;
          }
          .superFriendGroupItem
          {
              width:150px;
          }
          .subFriendGroupItem
          {
              background:url(../img/cat-sub.png) no-repeat -25px -8px;
              padding-left:25px;
              margin-left:10px;
              width:150px;     
          }
          .friendCateUl
          {
              padding:5px 5px 5px 5px;               
           }
           .friendCateUl li
           {
               list-style-type:none;
           }
           .f_td0
           {
               width:20%;
               text-align:center;
           }
           .f_td1
           {
               width:20%; 
               text-align:left;
           }
           .f_td2
           {
               width:15%; 
               text-align:left;
           }
           .f_td3
           {
               width:15%; 
               text-align:left;
           }
           .f_td4
           {
               width:15%;
               text-align:left;
           }
           .f_td5
           {
               width:15%;
               text-align:left;
           }
           .anchorImg
           {
               border:none;
           }
           .ItemCateOprButton
         {
             background:url(../img/dialog-operate.png) no-repeat -23px 0px; 
             float:left; 
             display:block; 
             text-indent:-1000px; 
             overflow:hidden;
             width:23px;
             height:17px;
         }
         #moveFriendGroupDiv
         {
             border:solid 1px lightGray;
             width:150px;
             position:absolute;
             background-color:#ECECEC;
         }
         #moveFriendGroupUl
         {
             margin:5px 5px 5px 5px;
         }
         #moveFriendGroupUl li
         {
             list-style-type:none;
         }
         .dataList_movegroup
         {
             background:url(../img/back-button.gif) no-repeat ;
              height:23px;
              width:95px;
              line-height:23px;
              float:left; 
             text-indent:15px; 
             text-decoration:none;
         }
         .hiddenObject
         {
             visibility:hidden ;
         }
         .add-button
         {
             line-height:23px;
             height:23px;
             background:url(../../img/add-button.png) no-repeat;
             font-size :12px;
             float:left;
             text-indent:35px;
             width:127px;
             text-decoration:none;
             margin-top:4px;
         }
         .editButton
         {
             background-position:-23px -51px;
         }
         .deleteButton
         {
             background-position:-23px 0px;
         }
      </style>
      <script src="../js/dropdowncontent.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder3" runat="server">
    <div class="mainContentDiv" id="mainContentDiv">
        <%--<asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate> --%>
                <table width="100%" cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="friendCateTd " style="vertical-align:top;">
                            <%--<div class="friendCateDiv">--%>
                                <div id="friendGroupListDiv" class="superFriendGroupItem" style=" vertical-align:top; padding:5px 5px 5px 5px; ">
                                    <div  id="G_AllGroupDiv"  style ="margin:1px 0px 1px 0px; width:190px;border-bottom:dashed 1px #ECECEC;">
                                        <a  id="G_AllGroupAnchor" title="点击查看所有的好友" runat="server"  onserverclick ="AllGroupAnchor_ServerClick">全部分组</a><br /> 
                                    </div>
                                    <asp:DataList ID="FriendGroupDataList" runat="server">
                                        <ItemTemplate>
                                            <div  id="G_GroupNameDiv" style =" border-bottom:dashed 1px #ECECEC; margin:1px 0px 1px 0px; width:190px">
                                                <table cellpadding="0" cellspacing="0"> 
                                                    <tr>
                                                        <td style=" width:140px">
                                                            <a title="点击查看该组中的好友" id="G_GroupNameAnchor" name="G_GroupNameAnchor" runat="server" class="subFriendGroupItem" onserverclick ="DataListAnchor_ServerClick"><%#Eval("cbname") %></a> 
                                                            <input  type="text" style=" width:120px; display:none;" value=""/>
                                                            <input  type="hidden" runat="server" id="FriendGroupIdHidden" value='<%#Eval("cbusergroupid") %>'/>
                                                        </td>                                                                                                                                                 
                                                        <td style=" width:25px">
                                                            <a href ="#" name="deleteFriendGroup" id='<%#Eval("cbusergroupid") %>' title="删除分组" class="ItemCateOprButton deleteButton " ><%#Eval("cbname") %></a>
                                                        </td>
                                                        <td style=" width:25px">
                                                            <a href ="#" name="editFriendGroup"  title="编辑分组" class="ItemCateOprButton editButton "  ><%#Eval("cbname") %></a>                                        
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </ItemTemplate>
                                    </asp:DataList>
                                </div>  
                                
                                <asp:Button ID="UpdatePageButton" CssClass="hiddenObject" runat="server" 
                                Text="刷新" onclick="UpdatePageButton_Click" />
                                
                                <div id="addFriendGroupDiv" style =" display:none; width:100%; background-color:Aqua; height:25px;" >
                                    <table cellpadding="0" cellspacing="0">
                                        <tr>
                                            <td style =" vertical-align:middle ;">
                                                <label for ="NewFriendGroupName">分组名称：</label>
                                                <input  type ="text" value="好友分组1" id="NewFriendGroupName" style =" width:90px;"/>
                                            </td>
                                            <td style =" vertical-align:middle ;">
                                                <a href ="#" onclick ="addFriendGroup();" ><img alt="" title="保存" src="../img/saveitem.ico" style =" border :none"/></a>
                                            </td>
                                            <td style=" vertical-align:top;">
                                                <a href ="#"  onclick ="document.getElementById('addFriendGroupDiv').style.display = 'none';" ><img title="取消" alt="" src="../img/closes.png" style =" border :none"/></a>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div>
                                    <a  href="#"  onclick ="document.getElementById('addFriendGroupDiv').style.display = 'block';" class="add-button">添加好友分组</a>
                                </div>                      
                            <%--</div>--%>
                        </td>
                        <td class="friendListTd " style=" vertical-align:top;">
                            <%--<div class="friendListDiv">--%>
                                 <%--DataList工具--%>
                                 <table  width ="100%">
                                    <tr>
                                        <td>
                                            您正在查看 <a href="#" runat="server" id="CurrentFriendGroupAnchor"></a> 中的好友：
                                        </td>
                                        <td style=" width:20%">
                                            <a href="searchFriends.aspx">查找/添加好友</a>
                                        </td>
                                    </tr>
                                 </table>
                                 <%--DataList标题栏--%>
                                 <table style =" width:100%; background-color:lightGray;">
                                    <tr>
                                        <td class="f_td0">图片</td>
                                        <td class="f_td1">姓名</td>
                                        <td class="f_td2">备注名称</td>
                                        <td class="f_td3">所属分组</td>
                                        <td class="f_td4">删除</td>
                                        <td class="f_td5">移动到分组</td>
                                    </tr>
                                 </table>
                                 <div style=" width:100%">
                                     <div id="NoDataDiv" visible="false" runat ="server">
                                        <span style =" color:Red; margin-top:10px; padding-left:10px; ">对不起，没有找到符合您要求的好友！</span>
                                     </div>
                                     <asp:DataList ID="MainDataList" Width="100%" runat="server">
                                        <ItemTemplate>
                                             <table style =" width:100%; border-bottom:dashed 1px #ECECEC;">
                                                <tr>
                                                    <td class="f_td0">
                                                        <a  title="点击查看好友的详细信息" target="_blank"  href="<%# "FriendInfo.aspx?id="+Eval("f_RECID").ToString() %>">
                                                            <img  style=" width:80px; height:70px;" src='<%#((Eval("cbimgpath").ToString()=="")?"../img/userdefaultimg.gif":Eval("cbimgpath").ToString()) %>'/>
                                                        </a>
                                                    </td>
                                                    <td class="f_td1">
                                                        <a  title="点击查看好友的详细信息" target="_blank"  href="<%# "FriendInfo.aspx?id="+Eval("f_RECID").ToString() %>">
                                                            <%#Eval("f_cbname")%>
                                                        </a>
                                                    </td>
                                                    <td class="f_td2">
                                                        <%#Eval("my_f_cbname").ToString ()%>
                                                    </td>
                                                    <td class="f_td3">
                                                        <%#Eval("my_groupname").ToString ()%>
                                                    </td>
                                                    <td class="f_td4">
                                                        <a href ="#" title="删除好友" class="ItemCateOprButton" onclick ="deleteFriendInGroup(this);" onmouseover ="this.style.backgroundPosition='0px 0px';" onmouseout ="this.style.backgroundPosition='-23px 0px';"><%#Eval("grouplist_RECID").ToString()  %></a>
                                                    </td>
                                                    <td class="f_td5">
                                                        <a href="#" class ="dataList_movegroup" id='<%#Eval("cbusergroupid").ToString() %>' onclick ="showMoveFriendGroupDiv(this);">移动到分组</a>
                                                        <input  type="hidden" value ='<%#Eval("grouplist_RECID").ToString()  %>'/>
                                                    </td>
                                                </tr>
                                             </table>
                                        </ItemTemplate>
                                     </asp:DataList>
                                     <div style=" width:100%; background-color:lightGray">
                                        <cc1:WebPager ID="MainWebPager" PagerStyle="NumericPages" 
                                         ControlToPaginate="MainDataList" runat="server"  PageSize="15"
                                         onpageindexchanged="MainWebPager_PageIndexChanged" />
                                    </div>
                                 </div>
                            <%--</div>--%>
                        </td>
                    </tr>
                </table>                
            <%--</ContentTemplate>
        </asp:UpdatePanel>--%>
    </div>
    <div id="moveFriendGroupDiv" style ="  display:none">
        <ul id="moveFriendGroupUl">
        </ul> 
    </div>
    
    <script type="text/javascript">
        function friendGroupSpanClick(thisObj) {
            var allParentDivList = document.getElementById("friendGroupListDiv").getElementsByTagName("div");
            for (var i = 0; i < allParentDivList.length; i++)
                allParentDivList[i].style.backgroundColor = "white";
            thisObj.parentNode.style.backgroundColor = "lightBlue";
            thisObj.nextSibling.click();
        }

        //
        function initFriendGroupDatalList() {
            var deleteFriendGroupList = document.getElementsByName("deleteFriendGroup");
            var editFriendGroupList = document.getElementsByName("editFriendGroup");
            for (var i = 0; i < deleteFriendGroupList.length; i++) {
                if (deleteFriendGroupList[i].innerHTML == "默认分组" || deleteFriendGroupList[i].innerHTML == "陌生人") {
                    deleteFriendGroupList[i].title = "该分组不能删除";
                    deleteFriendGroupList[i].style.backgroundPosition = "0px -68px";
                    deleteFriendGroupList[i].style.cursor = "not-allowed";
                    editFriendGroupList[i].title = "该分组不能编辑";
                    editFriendGroupList[i].style.backgroundPosition = "0px -119px";
                    editFriendGroupList[i].style.cursor = "not-allowed";
                }
                else {
                    deleteFriendGroupList[i].title = "删除分组";
                    deleteFriendGroupList[i].style.backgroundPosition = "-23px 0px";
                    deleteFriendGroupList[i].onmouseover = function() {
                        this.style.backgroundPosition = "0px 0px";
                    }
                    deleteFriendGroupList[i].onmouseout = function() {
                        this.style.backgroundPosition = "-23px 0px";
                    }
                    deleteFriendGroupList[i].onclick = function() {
                        var groupid = this.id;
                        var groupFriendsResult = AjaxFunction.GetFriendsInGroup(groupid);
                        if (groupFriendsResult.value != null && groupFriendsResult.value != "") {
                            alert("对不起，当前分组中存在好友，不能删除！");
                        }
                        else {
                            var result = AjaxFunction.deleteUserGroup(groupid);
                            if (result.value != null && result.value == true) {
                                updatePage();
                            }
                            else {
                                alert("删除好友分组失败！");
                            }
                        }
                    }
                    
                    editFriendGroupList[i].title = "编辑分组";
                    editFriendGroupList[i].style.backgroundPosition = "-23px -51px";
                    editFriendGroupList[i].onmouseover = function() {
                        this.style.backgroundPosition = "0px -51px";
                    }
                    editFriendGroupList[i].onmouseout = function() {
                        this.style.backgroundPosition = "-23px -51px";
                    }
                    editFriendGroupList[i].onclick = function() {
                        var td0 = this.parentNode.parentNode.getElementsByTagName("td")[0];
                        var anchor = td0.getElementsByTagName("a")[0]
                        var input = td0.getElementsByTagName("input")[0];
                        var groupidHidden = td0.getElementsByTagName("input")[1];
                        if (input.style.display == "none") {          //编辑
                            this.title = "保存分组名称";
                            input.value = anchor.innerHTML;
                            td0.parentNode.style.backgroundColor = "Aqua";
                            anchor.style.display = "none";
                            input.style.display = "inline";
                            this.style.background = "url(../img/saveitem.ico) no-repeat";
                            this.onmouseover = null;
                            this.onmouseout = null;
                            td0.nextSibling.getElementsByTagName("a")[0].style.visibility = "hidden";
                        }
                        else {                                        //保存
                            var saveResult = "更改失败";
                            if (input.value.replace(/\s/g, "") == "") {
                                alert("好友分组名称不能为空");
                                return;
                            }

                            if (this.value == anchor.innerHTML) {
                                saveResult = "";
                            }
                            else {
                                var allGroupNameList = document.getElementsByName("G_GroupNameAnchor");
                                for (var i = 0; i < allGroupNameList.length; i++) {
                                    if (allGroupNameList[i].innerHTML == input.value && input.value != anchor.innerHTML) {
                                        alert("您输入的分组名称已经存在，请重新输入！");
                                        return;
                                    }
                                }

                                var result = AjaxFunction.ChangeGroupName(groupidHidden.value, anchor.innerHTML, input.value);
                                if (result.value != null)
                                    saveResult = result.value;
                            }

                            if (saveResult == "") {
                                anchor.innerHTML = input.value;
                                td0.nextSibling.getElementsByTagName("a")[0].style.visibility = "visible";
                                td0.parentNode.style.backgroundColor = "white";
                                anchor.style.display = "inline";
                                input.style.display = "none";
                                this.style.background = "url(../img/dialog-operate.png) no-repeat -23px -51px";
                                this.onmouseover = function() {
                                    this.style.backgroundPosition = "0px -51px";
                                }
                                this.onmouseout = function() {
                                    this.style.backgroundPosition = "-23px -51px";
                                }
                                this.title = "编辑分组名称";
                            }
                            else {
                                alert(saveResult);
                            }
                        }
                    }
                      
                }
            }
        }
        //增加新的好友分组
        function addFriendGroup() {
            var newFriendGroupName = document.getElementById("NewFriendGroupName").value;
            if (newFriendGroupName.replace(/\s/g, "") == "") {
                alert("对不起，添加的好友分组名称不能为空！");
            }
            else {
                var result = AjaxFunction.AddNewGroup(newFriendGroupName);
                if (result.value != null && result.value == "") {
                    document.getElementById("addFriendGroupDiv").style.display = "none";
                    updatePage();
                }
                else {
                    alert("添加失败："+result.value);
                } 
            }
        }
        //显示移动分组Div
        function showMoveFriendGroupDiv(thisObj) {
            var useridHidden = thisObj.parentNode.getElementsByTagName("input")[0];
            var groupList_recid = useridHidden.value;
            initMoveFriendGroup(thisObj.id,groupList_recid );
            var moveFriendGroupDiv = document.getElementById("moveFriendGroupDiv");
            moveFriendGroupDiv.style.display = "block";
            moveFriendGroupDiv.style.left = getLeft(thisObj);
            moveFriendGroupDiv.style.top = parseInt ( getTop(thisObj))+thisObj.offsetHeight+"px";
        }
        //初始化移动分组的Div
        function initMoveFriendGroup(oldGroupId, groupList_recid) {
            var moveFriendGroupUl = document.getElementById("moveFriendGroupUl");
            moveFriendGroupUl.innerHTML = "";
            var currentUserResult = AjaxFunction.GetCurrentUserId();
            if (currentUserResult.value != null && currentUserResult.value != "") {
                var currentUser = currentUserResult.value;
                var currentGroupsResult = AjaxFunction.getUserFriendGroupList(currentUser);
                if (currentGroupsResult.value != null && currentGroupsResult.value != "") {
                    var currentGroups = eval( currentGroupsResult.value );
                    for (var i = 0; i < currentGroups.length; i++) {
                        if (currentGroups[i].groupid != oldGroupId) {
                            var newLiEle = document.createElement("li");
                            newLiEle.innerHTML ="<a href=\"#\">"+ currentGroups[i].groupname+"</a>";
                            moveFriendGroupUl.appendChild(newLiEle);
                            newLiEle.id = currentGroups[i].groupid;
                            newLiEle.onmouseover = function() {
                                this.style.backgroundColor = "lightBlue";
                            }
                            newLiEle.onmouseout = function() {
                            this.style.backgroundColor = "#ECECEC";
                            }
                            newLiEle.onclick = function() {
                                var newGroupId = this.id;
                                var result = AjaxFunction.ChangeFriendGroup(groupList_recid, oldGroupId, newGroupId);
                                if (result.value != null && result.value == true) {
                                    updatePage();
                                }
                                else {
                                    alert("移动分组失败！");
                                }
                            }
                        }
                    }
                }
            }
        }

        //删除好友
        function deleteFriendInGroup(thisObj) {
            var f_beizuName = thisObj.parentNode.previousSibling.innerHTML;
            var confirmResult = confirm("您确定要删除好友 " + f_beizuName + " 吗?");
            if (confirmResult.value == true) {
                var groupListRecid = thisObj.innerHTML;
                var result = AjaxFunction.deleteFriendInGroup(groupListRecid);
                if (result.value != null && result.value == true) {
                    updatePage();
                }
                else {
                    alert("删除好友失败！");
                } 
            }
        }
        
        //刷新页面
        function updatePage() {
            document.getElementById("ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder3_UpdatePageButton").click();
        }
         
        window.onload = function() {
            initFriendGroupDatalList();
            initWidthAndHeight();
            //initMoveFriendGroup();
        }         
        function initWidthAndHeight() {
            document.getElementById("mainContentDiv").style.width = screen.availWidth - 200 + "px";
        } 
        document.body.onclick = function(event) {
            var moveFriendGroupDiv = document.getElementById("moveFriendGroupDiv");
            var event = window.event || event;
            var eventTarget = event.target || event.srcElement;
            if (moveFriendGroupDiv.style.display != "none" && eventTarget.className != "dataList_movegroup")
                moveFriendGroupDiv.style.display = "none";
        }
        //公用方法
        function getTop(e) {
            var offset = e.offsetTop;
            if (e.offsetParent != null) {
                if (e.offsetParent.style.position == "absolute") {
                    if (Sys.firefox)
                        offset += parseInt(e.offsetParent.style.top);
                    return offset;
                }
                offset += getTop(e.offsetParent);
            }
            return offset;
        }
        function getLeft(e) {
            var offset = e.offsetLeft;
            if (e.offsetParent != null) {
                if (e.offsetParent.style.position == "absolute") {
                    if (Sys.firefox)
                        offset += parseInt(e.offsetParent.style.left);
                    return offset;
                }
                offset += getLeft(e.offsetParent);
            }
            return offset;
        }
    </script>
</asp:Content>
